<template>
    <div class="tag">
        <el-tag v-for="(item, index) in tagsLists" :key="item.path" :closable="item.name !== 'home'"
            :effect="$route.name === item.name ? 'dark' : 'plain'" @click="changeTags(item)" @close="delTags(item, index)">
            {{ item.label }}
        </el-tag>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    methods: {
        changeTags(item) {
            this.$router.push({ name: item.name })
        },
        // 点击删除对应tags
        delTags(item, index) {
            this.$store.commit('tag/closeTags', item);
            const length = this.tagsLists.length - 1;
            if (item.name !== this.$route.name) {
                return
            }

            if (index == length) {
                console.log(index, 'index', length);
                console.log('name', this.tagsLists[length].name);
                this.$router.push({
                    name: this.tagsLists[index].name
                })
            } else {
                this.$router.push({
                    name: this.tagsLists[length].name
                })
            }
        }
    },
    computed: {
        ...mapState({
            tagsLists: state => state.tag.tagsLists
        })
    }
}
</script>

<style lang="scss" scoped>
.tag {
    margin-top: 10px;

    .el-tag {
        margin-right: 10px;

        &:first-child {
            margin-left: 10px;
        }
    }
}
</style>